<template>
  <div class="myBox">
    <div class="centerBox">
      <div class="left_box">
        <img src="../assets/images/reg.png" class="myImg" />
      </div>

      <div class="right_box">
        <div class="right_form">
          <el-form
            ref="registerForm"
            :model="registerForm"
            :rules="registerFormrules"
            status-icon
            @keydown.enter.native="register"
          >
            <el-form-item>
              <span class="mySpan1">用户注册</span>
            </el-form-item>

            <el-form-item prop="uName">
              <el-input
                v-model="registerForm.uName"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user-solid"
              ></el-input>
            </el-form-item>

            <el-form-item prop="uPass">
              <el-input
                v-model="registerForm.uPass"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                show-password
                type="password"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item prop="checkPass">
              <el-input
                v-model="registerForm.checkPass"
                placeholder="确认密码"
                prefix-icon="el-icon-lock"
                show-password
                type="password"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item prop="idCard">
              <el-input
                v-model="registerForm.idCard"
                placeholder="请输入身份证号码"
                prefix-icon="el-icon-bank-card"
              ></el-input>
            </el-form-item>

            <el-form-item prop="iphone">
              <el-input
                v-model="registerForm.iphone"
                placeholder="请输入手机号码"
                prefix-icon="el-icon-phone-outline"
              ></el-input>
            </el-form-item>

            <el-form-item class="btnform">
              <el-button @click="register">注册</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>

          <p class="mycheck">
            <el-checkbox v-model="checked"
              >我已阅读并同意<u @click="serve">服务协议</u></el-checkbox
            >
          </p>

          <span class="mySpan2"
            >已有账号？？<u @click="toLogin">立即登录</u></span
          >
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" title="服务协议" width="500">
      <p>1、经文都注册系统完成注册程序并通过身份认证的用户即为正式用户。</p>
      <p>
        2、如发现用户帐号中含有不雅文字或不恰当名称的,
        文都保留注销其用户帐号的权利。
      </p>
      <p>
        3、用户帐号的所有权归文都, 用户完成申请注册手续后,
        用户享有使用权。3个月未使用的用户账号, 文都保留收回的权利。
      </p>
      <p>
        4、用户有义务保证密码和帐号的安全,
        用户利用该帐号所进行的一切活动引起的任何损失或损害,
        由用户自行承担全部责任,
        文都不承担任何责任。如用户发现帐号遭到未授权的使用或发生其他任何安全问题,
        应立即修改账号密码并妥善保管。因黑客行为或用户的保管疏忽导致帐号非法使用,
        文都不承担任何责任。
      </p>
      <p>
        5、用户帐号和密码仅由初始申请注册人使用，用户不得将自己用户账户或密码有偿或无偿以转让、出借、授权等方式提供给第三人操作和使用,
        否则用户应当自行承担因违反此要求而遭致的任何损失。违反本项约定的，文都并保留收回账号的权利。若因违反本约定对他人造成损害的，用户应与实际使用人承担连带赔偿责任，同时文都保留追究用户违约责任的权利。
      </p>
      <p>
        6、用户帐号在丢失、遗忘密码及因合用产生使用权归属纠纷后,
        须遵照文都的申诉途径请求找回帐号。用户可以凭初始注册资料向文都申请找回帐号。文都的账户恢复机制仅负责识别申请用户所提资料与系统记录资料是否一致,
        而无法识别申诉人是否系帐号的真正使用权人。对用户因被他人冒名申请而致的任何损失,
        文都不承担任何责任, 用户知晓帐号及密码保管责任在于用户,
        文都并不承诺帐号丢失或遗忘密码后用户一定能通过申诉找回帐号。用户应当谨慎填写初始手机号或注册邮箱作为确认接收争议帐号的指定邮箱。
      </p>
      <p>
        7、文都建议用户应当使用本人名义为用户账户充值或行使付款行为。若用户存在使用第三人的名义进行充值或付款，或委托第三人代为充值或付款之行为的，则以上行为被视作本人的行为，若由于该第三人行为导致充值或付款行为失败或成功后又被撤销的，均被认为是用户本人真实意思的表示和用户本人实施的行为，由此所造成的一切法律后果均由用户自行承担。
      </p>
      <span slot="footer">
        <el-button @click="confirm" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import axios from "axios";

export default {
  name: "register",
  comName: "注册",

  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.uPass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    var checkIdentitytionId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      }
      if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error("你输入的身份证长度或格式错误"));
      }

      // 身份证号码校验
      var sum = 0,
        weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
        codes = "10X98765432";
      for (var i = 0; i < value.length - 1; i++) {
        sum += value[i] * weights[i];
      }
      var last = codes[sum % 11]; //计算出来的最后一位身份证号码
      if (value[value.length - 1] != last) {
        callback(new Error("你输入的身份证号非法"));
      }
      callback();
    };
    return {
      registerForm: {
        uName: "",
        uPass: "",
        idCard: "",
        iphone: "",
      },
        checkPass: "",

      checked: false,
      dialogVisible: false,

      registerFormrules: {
        uName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        uPass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "change" }],
        idCard: [
          { validator: checkIdentitytionId, trigger: "blur", message: "请输入合法身份证号", }],
        iphone: [
          { required: true, message: "手机号不能为空",trigger: "blur"  },
          {
            type: "number",
            message: "手机号格式不正确",
            trigger: "blur",
            transform(value) {
              var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
              if (!phonereg.test(value)) {
                return false;
              } else {
                return Number(value);
              }
            },
          },
        ],
      },
    };
  },

  methods: {
    serve() {
      this.dialogVisible = true;
    },

    confirm() {
      this.dialogVisible = false;
      this.checked = true;
    },

    reset() {
      this.$refs.registerForm.resetFields();
    },

    register() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          if (this.checked === false) {
            this.$message({
              message: "请仔细阅读服务协议并同意",
              type: "warning",
            });
          } else {
            axios({
              url: "/api/user/register",
              method: "post",
              data: {
                ...this.registerForm
              },
            }).then((res) => {
              if(res.data.error==0){
              this.$router.push({ path: "/login" });
              console.log("注册成功"+res.data);
              }else if(res.data.error==1){
                 this.$message({
              message: "用户名已存在",
              type: "warning",
            });
              }else{
                this.$message.error("注册失败");

              }
           
            });
          }
        } else {
          this.$message.error("注册失败，请完整填写好相关信息");
        }
      });
    },

    toLogin() {
      this.$router.push({ path: "/login" });
    },
  },

  mounted() {},
};
</script>

<style lang="scss" scoped>
.myBox {
  background-color: #f8f9fb;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .centerBox {
    background-color: rgb(255, 255, 255);
    width: 80%;
    height: 600px;
    box-shadow: 0px 0px 8px rgb(160, 160, 160);
    border-radius: 15px;
    display: flex;

    .left_box {
      background-color: #d6d1ff;

      border-radius: 15px 0px 0px 15px;
      height: 600px;
      width: 90%;
      display: flex;
      justify-content: center;
      align-items: center;

      .myImg {
        width: 100%;
        height: 400px;
      }
    }

    .right_box {
      background-color: rgb(255, 255, 255);
      border-radius: 0px 15px 15px 0px;
      height: 600px;
      width: 65%;
      display: flex;
      justify-content: center;
      align-items: center;

      .mySpan2 {
        font-size: 3px;
        color: rgb(90, 90, 90);

        u {
          font-size: 15px;
          font-weight: bold;
          color: #5a85fd;
        }
      }

      .right_form {
        width: 65%;
            text-align: center;

        .mySpan1 {
          font-size: 28px;
          font-weight: bold;
          letter-spacing: 15px;
        }
        .btnform {
          display: flex;
          justify-content: space-between;

          .el-button {
            text-align: center;
            background-color: #b29efa;
            color: #fff;
            font-size: 16px;
          }
        }

        .el-input /deep/ .el-input__inner {
          background-color: #f8f9fb;
        }
      }
    }
  }
}
</style>